<template>
  <div>
      
      <div style="margin: 10px 0;">
          <el-input style="width: 300px;" suffix-icon="el-icon-s-flag" placeholder="请输入宠物名" v-model="p_name"></el-input>
          <!-- <el-input style="width: 300px; margin-left: 5px;" suffix-icon="el-icon-s-promotion" placeholder="请输入邮箱"></el-input>
      <el-input style="width: 300px; margin-left: 5px;" suffix-icon="el-icon-location" placeholder="请输入地址"></el-input> -->
          <el-button style="margin-left: 5px;" type="primary" @click="load">搜索<i class="el-icon-search"></i></el-button>
          <el-button type="warning" @click="reset">重置<i class="el-icon-refresh"></i></el-button>
      </div>
      <div style="margin: 10px 0;">
          <el-button type="primary" @click="add">发布宠物<i class="el-icon-circle-plus-outline"></i></el-button>
          <el-button type="danger" :disabled="deleteIds.length > 0 ? false : true" @click="deleteData">批量删除<i
                  class="el-icon-remove-outline"></i></el-button>
          <el-upload class="upload-demo" :show-file-list="false" :accept="'.xlsx'" :on-success="handleExcelImportSuccess"
              action="http://localhost:8080/user/fileImport" style="display: inline-block; margin-left: 5px;">
              <el-button type="primary">导入<i class="el-icon-folder-add"></i></el-button>
          </el-upload>
          <el-button type="primary" @click="exp" style="margin-left: 5px;">导出<i class="el-icon-printer"></i></el-button>
      </div>
      <el-table :data="tableData" border stripe @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="petid" label="宠物ID" width="80">
          </el-table-column>
          <el-table-column  label="图片" width="120">
            <template  slot-scope="scope">
 
                <img :src="scope.row.image" alt="这是图片" width="60" height="60" style="border-radius: 50%;">

            </template>

          </el-table-column>
          <el-table-column prop="petname" label="宠物名" width="120">
          </el-table-column>
          <el-table-column prop="petage" label="年龄" width="60">
          </el-table-column>
          <el-table-column label="性别" width="60">
            <template scope="scope">
                  <span v-if="scope.row.petsex>0" style="color:#87CEFA; font-size: large">♂</span>
                  <span v-else style="color: #EEB4B4; font-size: large">♀</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="120">
                <template scope="scope">
                  <span v-if="scope.row.status==2" style="color:#9370DB">已领养</span>
                  <span v-else-if="scope.row.status==0" style="color: #37B328">未领养</span>
                  <span v-else style="color: #EEC900">处理中</span>
                </template>
            </el-table-column>
          <el-table-column prop="date" label="发布时间" width="240">
          </el-table-column>
          <el-table-column label="领养人ID" width="120">
            <template scope="scope">
                  <span v-if="scope.row.userid==0" style="color:#54FF9F; font-size: large">暂无</span>
                  <span v-else style="color: #EEB4B4; font-size: large">
                    {{ scope.row.userid }}
                  </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                  <el-button type="success" @click="edit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
                  <el-popconfirm style="margin-left: 5px;" confirm-button-text='确定' cancel-button-text='取消'
                      icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="del(scope.row.petid)">
                      <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
                  </el-popconfirm>
              </template>
          </el-table-column>
      </el-table>
      <div style="padding: 10px 0;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
              :page-sizes="[5, 10, 15]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
      </div>
      <el-dialog title="宠物信息" :visible.sync="dialogFormVisible" width="30%">
          <el-form label-width="70px">
              <el-form-item label="宠物名">
                  <el-input v-model="form.petname" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item prop="image" label="上传图片" v-model="form.image">
                <el-upload
                action=""
                list-type="picture-card"
                :auto-upload="false"
                :limit="Number(1)"
                :http-request="myUpload"
                ref="upload1"
                :on-success="imgSuccess"
                :file-list="imgfile"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
              <el-form-item label="年龄">
                <template>
                    <el-input-number v-model="form.petage" controls-position="right" @change="handleChange" :min="1" :max="100"></el-input-number>
                </template>
              </el-form-item>
              <el-form-item label="性别">
                <template>
                    <el-radio v-model="form.petsex" label="0">♀</el-radio>
                    <el-radio v-model="form.petsex" label="1">♂</el-radio>
                </template>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="quit">取 消</el-button>
              <el-button type="primary" @click="submitUpload(1)">确 定</el-button>
          </div>
      </el-dialog>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  name: "Pet",
  props: {

  },
  data() {
      return {
          typ:0,
          p_name: '',
          pageNum: 1,
          pageSize: 10,
          total: 0,
          tableData: [],
          form: {},
          formX: {},
          userAcc:'',
          collapseBtnClass: 'el-icon-s-fold',
          isCollapse: false,
          sideWidth: 200,
          logoTextShow: true,
          dialogFormVisible: false,
          multipleSelection: [],
          deleteIds: [],
          n: 0,
          dialogImageUrl: '',
          dialogVisible: false,
          imgfile:[]
      }
  },
  created() {
      this.load();
  },
  methods: {
      handleExcelImportSuccess() {
          this.$message.success("文件导入成功");
          this.load();
      },
      exp() {
          window.open("http://localhost:8080/pet/export")
      },
      quit() {
          this.dialogFormVisible = false;
          this.load();
      },
      deleteData() {
          this.$confirm('您确定删除吗', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
          }).then(() => {
              console.log(this.deleteIds);
              var p=new URLSearchParams();
              p.append("petid",this.deleteIds);
              axios({
                  
                  url:"http://localhost:8080/pet/delBatch",
                  method:"delete",
                  params:p
              }).then(obj=>{
                  if(obj.data){
                      this.$message.success("删除成功");
                      this.load();
                  }else{
                      this.$message.error("删除失败");
                  }
              })
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消'
              });
              this.load();
          });
      },
      handleSelectionChange(dataList) {
          this.deleteIds = [];
          dataList.forEach(item => {
              this.deleteIds.push(item.petid)
          })
          
      },
      del(id) {
          var p=new URLSearchParams();
          p.append("petid",id);
          axios({
              url:"http://localhost:8080/pet/delPet",
              method:"delete",
              params:p
          }).then(obj=>{
              if(obj.data){
                  this.$message.success("删除成功");
                  this.quit();
                  this.load();
              }else{
                  this.$message.error("删除失败");
              }
          });
      },
      edit(row) {
        this.imgfile=[];
        this.form = row;
        this.imgfile.push({name:"123.jpg", url:row.image});
        this.dialogFormVisible = true;
      },
      save() {
          // var t=new URLSearchParams();
          // t.append("userid",this.form.userid);
          var param=new URLSearchParams();
          param.append("petid",this.form.petid);
          param.append("petname",this.form.petname);
          param.append("petage",this.form.petage);
          param.append("image",this.dialogImageUrl);
          param.append("petsex",this.form.petsex);
          param.append("userid",0);
          var t=new URLSearchParams();
          t.append("petname",this.form.petname);
          t.append("petage",this.form.petage);
          t.append("image",this.dialogImageUrl);
          t.append("petsex",this.form.petsex);
          t.append("userid",0);
          
          if(this.typ==0){
              axios({
                  url:"http://localhost:8080/pet/updatePet",
                  method:"put",
                  data:param
              }).then(obj => {
                  if(obj.data){
                      this.$message.success("修改成功");
                      this.quit();
                      this.load();
                      
                  }else{
                      this.$message.error("修改失败");
                  }
              })
          }else{
            console.log(t);
              axios({
                  url:"http://localhost:8080/pet/addPet",
                  method:"post",
                  data:t
              }).then(obj=>{
                  if(obj.data){
                      this.$message.success("新增成功");
                      this.quit();
                      this.load();
                  }else{
                      this.$message.error("新增失败");
                  }
              });
              this.typ=0;
          }
          
          
      },
      add() {
          this.dialogFormVisible = true;
          this.typ=1;
          this.imgfile=[];
          this.form = {};
      },
      reset() {
          this.p_name = '';
          this.load();
      },
      load() {
        this.userAcc=JSON.parse(sessionStorage.getItem("loginUser"));
          this.imgfile=[];
          var param=new URLSearchParams();
          param.append("page",this.pageNum);
          param.append("size",this.pageSize);
          param.append("petname",this.p_name);
          axios({
              url:"http://localhost:8080/pet/getPageByName",
              method:"get",
              params:param

          }).then(obj => {
              this.tableData=obj.data.records;
              this.total=obj.data.total;
          })
              
      },
      
      handleSizeChange(pageSize) {
          console.log(pageSize);
          this.pageSize = pageSize;
          this.load();
      },


      handleCurrentChange(pageNum) {
          
          this.pageNum = pageNum;
          this.load();
      },

      fileUrl(file){
        console.log(file);
      },
      
      imgSuccess(res, file) {
      this.dialogImageUrl=res.data;
      this.form.image=this.dialogImageUrl;
      console.log(res.data);
      //这里我是用一个fileList数组存取，当保存的时候进行图片路径处理
    },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      submitUpload(value){
        if(value==1){
            this.$refs["upload1"].submit();
        }
      },
      myUpload(content){
        var param=new FormData();
        param.append("uploadFile",content.file);
        axios({
            url:"http://localhost:8080/pet/upload",
            method:"post",
            data:param
        }).then(obj=>{
            this.$message.success(obj.data.message);
            if(obj.data.status==1){
                
                this.dialogImageUrl=obj.data.data;
                console.log(this.dialogImageUrl);

                this.save();
                this.clearFiles();
            }
        })
      },
      
    clearFiles () {
      this.$refs['upload1'].clearFiles();
    },
    handleChange(value) {
        console.log(value);
    }

  }
}
</script>